<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>{{ msg }}</h3>

        <!-- 使用过滤器 -->
        <h3>{{ msg | formatMsg }}</h3>

        <!-- 可以用在v-bind上 -->
        <img src="" :alt="title | formatTitle">

        <!-- 下面这句代码要报错 -->
        <!-- <input type="text" v-model="msg | formatMsg"> -->
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'hello',
                title: '我是一个文字'
            },
            filters: {
                // 声明一个过滤器名字叫 formatMsg
                formatMsg (val) {

                    return val + '就是你好的意思'
                },

                formatTitle (val) {

                    return val + '，我是过滤的结果'
                }
            }
        })
    </script>
</body>
</html>